<template>
  <CellGroup>
    <Cell v-for="item of columns" :title="item.column_name" :value="getValue(item)" :label="item.column_comment"></Cell>
  </CellGroup>
</template>

<script setup>
  import { useRoute } from 'vue-router';
  import { ref, inject, watchEffect, onMounted } from 'vue';
  import { CellGroup, Cell } from 'vant';

  const $route = useRoute();
  const $http = inject('$http');

  const props = defineProps({
    table: {
      type: String
    }
  });

  const columns = ref([]);

  function getColumns() {
    let dbIndex = $route.params.dbIndex;
    let schema = $route.params.schema;
    let tableName = props.table;

    if (dbIndex && schema && tableName) {
      $http.get(`/api/db/${dbIndex}/${schema}/${tableName}/columns`).then(res => (columns.value = res.datas));
    }
  }

  function getValue(item){
    let label = item.column_type;

    if(item.column_key == 'PRI'){
      label += ' / 主键';
    }

    if(item.is_nullable == 'YES'){
      label += ' / 可空';
    }

    return label;
  }

  watchEffect(() => getColumns());

  onMounted(() => {
    getColumns();
  });
</script>
